<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>得圣APP - 功能指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
            color: #333;
            line-height: 1.6;
            perspective: 1000px;
        }

        .container {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            background: #fff;
            min-height: 100vh;
            box-shadow: none;
            border-radius: 0;
            overflow: hidden;
            transform-style: preserve-3d;
            transform: translateZ(0);
        }

        @media (min-width: 415px) {
            .container {
                max-width:100%;
                margin: 0 auto;
                box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.1);
                border-radius: 25px;
            }
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 20px 50px;
            text-align: center;
            position: relative;
            overflow: hidden;
            border-bottom-left-radius: 35px;
            border-bottom-right-radius: 35px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.25), 0 5px 15px rgba(0,0,0,0.1);
            transform: translateZ(20px);
            z-index: 1;
        }

        .header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
            animation: float 8s ease-in-out infinite;
            z-index: 1;
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            z-index: 1;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-25px) rotate(180deg);
            }
        }

        .header h1 {
            font-size: 34px;
            font-weight: 800;
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
            letter-spacing: 2px;
            text-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
        }

        .header p {
            font-size: 19px;
            opacity: 0.95;
            position: relative;
            z-index: 2;
            font-weight: 300;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
        }

        /* 切换按钮样式 */
        .tab-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
            position: relative;
            z-index: 2;
        }

        .tab-button {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            padding: 12px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            backdrop-filter: blur(10px);
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        .tab-button:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        .tab-button.active {
            background: rgba(255, 255, 255, 0.95);
            color: #667eea;
            border-color: rgba(255, 255, 255, 0.95);
            text-shadow: none;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }

        /* 用户须知按钮特殊样式 - 待选中状态 */
        .tab-button[onclick="switchTab('notice')"] {
            background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
            color: white;
            border: 2px solid #ff4757;
            font-weight: 700;
            text-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
            box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3), 0 0 20px rgba(255, 71, 87, 0.2);
            animation: wiggle-notice 3s ease-in-out infinite;
        }
        
        .tab-button[onclick="switchTab('notice')"] .hand-icon {
            color: white !important;
            font-size: 18px;
            margin-left: 5px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .tab-button[onclick="switchTab('notice')"] .hand-icon svg {
            width: 18px;
            height: 18px;
            fill: white;
            vertical-align: middle;
        }

        .tab-button[onclick="switchTab('notice')"]:hover {
            background: linear-gradient(135deg, #ff3742 0%, #ff2d3a 100%);
            border-color: #ff3742;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 30px rgba(255, 71, 87, 0.4), 0 0 25px rgba(255, 71, 87, 0.3);
        }

        /* 用户须知按钮特殊样式 - 选中状态 */
        .tab-button[onclick="switchTab('notice')"].active {
            background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
            color: #ff4757;
            border: 3px solid #ff4757;
            text-shadow: none;
            box-shadow: 0 8px 25px rgba(255, 71, 87, 0.25), 0 0 30px rgba(255, 71, 87, 0.15);
            font-weight: 800;
            animation: none; /* 选中状态时停止摆动动画 */
        }

        .tab-button[onclick="switchTab('notice')"].active .hand-icon svg {
            display: none;
        }

        @keyframes wiggle-notice {
            0%, 10% {
                transform: rotate(0deg) scale(1);
                box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3), 0 0 20px rgba(255, 71, 87, 0.2);
            }
            12% {
                transform: rotate(-3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            16% {
                transform: rotate(3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            20% {
                transform: rotate(-3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            24% {
                transform: rotate(3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            28% {
                transform: rotate(-3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            32% {
                transform: rotate(3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            36% {
                transform: rotate(-3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            40% {
                transform: rotate(3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            44% {
                transform: rotate(-3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            48% {
                transform: rotate(3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            52% {
                transform: rotate(-3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            56% {
                transform: rotate(3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            60% {
                transform: rotate(-3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            64% {
                transform: rotate(3deg) scale(1.02);
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
            }
            67%, 100% {
                transform: rotate(0deg) scale(1);
                box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3), 0 0 20px rgba(255, 71, 87, 0.2);
            }
        }

        @keyframes pulse-red {
            0%, 100% {
                box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3), 0 0 20px rgba(255, 71, 87, 0.2);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4), 0 0 30px rgba(255, 71, 87, 0.3);
                transform: scale(1.02);
            }
        }

        @keyframes rotate-border {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* 须知内容区域样式 */
        .notice-section {
            display: none;
            text-align: center;
            background: linear-gradient(to bottom, #f0f4ff 0%, #ffffff 100%);
            position: relative;
            overflow: hidden;
            transform: translateZ(10px);
            margin-top: -20px;
            z-index: 2;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
        }

        .notice-image {
            max-width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }

        .notice-image:hover {
            transform: scale(1.02);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
        }

        @media (max-width: 768px) {
            .tab-button {
                padding: 10px 20px;
                font-size: 14px;
            }
        }

        .video-section {
            background: linear-gradient(to bottom, #f0f4ff 0%, #ffffff 100%);
            padding: 60px 20px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
            transform: translateZ(10px);
            margin-top: -20px;
            z-index: 2;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
        }

        .video-section::before {
            content: '';
            position: absolute;
            top: -50px;
            left: -50px;
            width: 150px;
            height: 150px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            opacity: 0.05;
        }

        .video-section::after {
            content: '';
            position: absolute;
            bottom: -80px;
            right: -80px;
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            opacity: 0.05;
        }

        .video-title {
            font-size: 30px;
            font-weight: 800;
            color: #2d3748;
            margin-bottom: 20px;
            position: relative;
            z-index: 2;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .video-subtitle {
            color: #718096;
            font-size: 18px;
            margin-bottom: 40px;
            line-height: 1.7;
            position: relative;
            z-index: 2;
        }

        .video-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .control-group {
            display: flex;
            align-items: center;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 20px;
            padding: 8px 15px;
        }

        .control-label {
            font-size: 14px;
            color: #2d3748;
            margin-right: 8px;
            font-weight: 600;
        }

        .control-input {
            width: 60px;
            padding: 5px;
            border: 1px solid #cbd5e0;
            border-radius: 10px;
            text-align: center;
            font-size: 14px;
        }

        .video-container {
            position: relative;
            width: 100%;
            max-width: 370px;
            margin: 0 auto;
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.2), 0 15px 30px rgba(0,0,0,0.15);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 2;
            transform: translateZ(15px);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .video-container:hover {
            transform: translateY(-10px) translateZ(20px);
            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25), 0 20px 40px rgba(0, 0, 0, 0.18);
        }

        .video-placeholder {
            width: 100%;
            height: 555px; /* 调整为1080×1620比例，370px宽度对应555px高度 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            transform: translateZ(5px);
            border-radius: 28px;
            aspect-ratio: 2/3; /* 设置宽高比为2:3，对应1080×1620 */
        }

        .video-placeholder::before {
            content: '';
            position: absolute;
            top: -100%;
            left: -100%;
            width: 300%;
            height: 300%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% {
                transform: rotate(45deg) translate(-100%, -100%);
            }

            100% {
                transform: rotate(45deg) translate(100%, 100%);
            }
        }

        .play-button {
            width: 75px;
            height: 75px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 3;
            transform: translateZ(10px);
        }

        .play-button:hover {
            transform: scale(1.2) translateZ(15px);
            background: white;
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 8px 25px rgba(0, 0, 0, 0.25);
        }

        .play-icon {
            width: 0;
            height: 0;
            border-left: 28px solid #667eea;
            border-top: 17px solid transparent;
            border-bottom: 17px solid transparent;
            margin-left: 8px;
            filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
        }

        .features-section {
            padding: 40px 0 50px;
            transform: translateZ(5px);
            background: linear-gradient(to bottom, #ffffff 0%, #f8f9ff 100%);
            position: relative;
            z-index: 3;
            margin-top: -10px;
            border-top: 1px solid rgba(102, 126, 234, 0.1);
        }

        .section-title {
            text-align: center;
            font-size: 30px;
            font-weight: 800;
            color: #2d3748;
            margin-bottom: 35px;
            position: relative;
            padding-top: 25px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 3px;
            box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
        }

        /* 图片容器样式 */
        .feature-image-container {
            text-align: center;
            padding: 0;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            width: 100%;
            max-width: none;
            transform: translateZ(10px);
        }

        .feature-image-container::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 85%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
        }

        .feature-image-container:hover {
            transform: translateY(-8px) translateZ(15px);
        }

        .feature-image {
            max-width: 100%;
            height: auto;
            border-radius: 0;
            display: block;
            margin: 0 auto;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 10px 25px rgba(0, 0, 0, 0.1);
            width: 100%;
            border-top: 1px solid #f1f5f9;
            border-bottom: 1px solid #f1f5f9;
            transition: all 0.4s ease;
        }

        .feature-image:hover {
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .cta-section {
            background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
            color: white;
            padding: 50px 20px;
            text-align: center;
        }

        .cta-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .cta-subtitle {
            font-size: 16px;
            opacity: 0.9;
            margin-bottom: 30px;
            font-weight: 300;
        }

        .download-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .download-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 12px 25px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .download-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 480px) {
            .download-buttons {
                flex-direction: column;
                align-items: center;
            }

            .download-btn {
                width: 200px;
            }

            .container {
                border-radius: 0;
            }
        }

        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <!-- 切换按钮 -->
            <div class="tab-container">
                <button class="tab-button active" onclick="switchTab('guide')">功能指南</button>
                <button class="tab-button" onclick="switchTab('notice')"> 点击查看使用须知</button>
            </div>
        </div>

        <!-- 功能指南内容区域 -->
        <div id="guide-content" class="guide-content">
            <!-- 视频介绍区域 -->
            <div class="video-section">
                <h2 class="video-title">功能演示视频</h2>
                <p class="video-subtitle">通过视频快速了解得至APP的核心功能<br>让您轻松掌握设备管理技巧</p>
                
                <div class="video-container">
                    <div class="video-placeholder" id="videoPlayer" style="background-image: url('fengmian.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
                        <div class="play-button" onclick="playVideo()">
                            <div class="play-icon"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 区域过渡元素 -->
            <div class="transition-element"></div>

            <!-- 功能详解区域 -->
            <div class="feature-image-container">
                <img src="zhinan.png" alt="主要功能详解" class="feature-image">
            </div>
        </div>

        <!-- 用户须知内容区域 -->
        <div id="notice-content" class="notice-section">
            <img src="xuzhi.jpg" alt="用户须知" class="notice-image">
        </div>
    </div>

    <script>
        // 当前播放的视频源
        let currentVideoSource = "video.mp4";
        
        // 切换标签页功能
        function switchTab(tabName) {
            // 获取所有按钮和内容区域
            const buttons = document.querySelectorAll('.tab-button');
            const guideContent = document.getElementById('guide-content');
            const noticeContent = document.getElementById('notice-content');
            
            // 移除所有按钮的active状态
            buttons.forEach(button => button.classList.remove('active'));
            
            if (tabName === 'guide') {
                // 显示功能指南，隐藏用户须知
                guideContent.style.display = 'block';
                noticeContent.style.display = 'none';
                // 激活功能指南按钮
                buttons[0].classList.add('active');
            } else if (tabName === 'notice') {
                // 显示用户须知，隐藏功能指南
                guideContent.style.display = 'none';
                noticeContent.style.display = 'block';
                // 激活用户须知按钮
                buttons[1].classList.add('active');
            }
        }
        
        // 视频播放功能
        function playVideo() {
            console.log('尝试播放视频...');
            const videoPlayer = document.getElementById('videoPlayer');
            // 安全地获取宽高比值，如果元素不存在则使用默认值
            const aspectRatioElement = document.getElementById('aspectRatio');
            const aspectRatio = aspectRatioElement ? aspectRatioElement.value || '2/3' : '2/3';
            
            console.log('加载视频文件:', currentVideoSource);
            
            // 显示全屏背景的加载状态
            videoPlayer.innerHTML = `
                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 28px; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;">
                    <div style="width: 50px; height: 50px; border: 3px solid rgba(255,255,255,0.3); border-top: 3px solid white; border-radius: 50%; animation: spin 1s linear infinite;"></div>
                </div>
            `;
            
            // 添加旋转动画样式
            const style = document.createElement('style');
            style.textContent = `
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            `;
            document.head.appendChild(style);
            
            // 延迟一小段时间后再加载视频，让用户看到加载状态
            setTimeout(() => {
                videoPlayer.innerHTML = `
                    <div style="position: relative; width: 100%; height: 100%;">
                        <video width="100%" height="100%" controls style="aspect-ratio: 2/3; object-fit: contain; border-radius: 28px; width: 100%; height: 100%;" id="mainVideo" crossorigin="anonymous">
                            <source src="${currentVideoSource}" type="video/mp4">
                            <p>您的浏览器不支持视频播放。</p>
                        </video>
                    </div>
                `;
                
                console.log('视频元素已创建');
                
                // 应用当前播放速度并自动播放
                setTimeout(() => {
                    const video = document.getElementById('mainVideo');
                    if (video) {
                        console.log('找到视频元素');
                        // 安全地获取播放速度值
                        const speedElement = document.getElementById('playbackSpeed');
                        const speed = speedElement ? speedElement.value || 1 : 1;
                        video.playbackRate = parseFloat(speed);
                        console.log('设置播放速度:', speed);
                        
                        // 尝试自动播放
                        video.play().then(() => {
                            console.log('视频自动播放成功');
                        }).catch(error => {
                            console.log('自动播放被阻止，需要用户手动点击:', error);
                            // 添加点击事件监听器
                            video.addEventListener('click', function() {
                                video.play().catch(e => {
                                    console.error('播放失败:', e);
                                    // 显示错误信息
                                    showVideoError('播放被阻止: ' + e.message);
                                });
                            });
                        });
                        
                        // 添加详细的错误处理
                        video.addEventListener('error', function(e) {
                            console.error('视频播放出错:', e);
                            const error = e.target.error;
                            let errorMsg = "未知错误";
                            
                            switch (error.code) {
                                case error.MEDIA_ERR_ABORTED:
                                    errorMsg = "您中止了视频播放";
                                    break;
                                case error.MEDIA_ERR_NETWORK:
                                    errorMsg = "网络错误导致视频下载中断";
                                    break;
                                case error.MEDIA_ERR_DECODE:
                                    errorMsg = "视频解码错误";
                                    break;
                                case error.MEDIA_ERR_SRC_NOT_SUPPORTED:
                                    errorMsg = "视频格式不支持或文件不存在";
                                    break;
                            }
                            
                            showVideoError(errorMsg + ' (错误代码: ' + error.code + ')');
                        });
                        
                        // 添加加载事件
                        video.addEventListener('loadstart', function() {
                            console.log('开始加载视频...');
                        });
                        
                        video.addEventListener('canplay', function() {
                            console.log('视频可以播放');
                        });
                        
                        video.addEventListener('play', function() {
                            console.log('视频开始播放');
                        });
                        
                        video.addEventListener('loadeddata', function() {
                            console.log('视频数据已加载');
                        });
                        
                        video.addEventListener('loadedmetadata', function() {
                            console.log('视频元数据已加载');
                        });
                    } else {
                        console.error('未找到视频元素');
                        showVideoError('无法创建视频播放器');
                    }
                }, 100);
            }, 500);
        }
        

        
        // 更新视频样式（比例）
        function updateVideoStyle() {
            const videoPlayer = document.getElementById('videoPlayer');
            const video = videoPlayer.querySelector('video');
            if (video) {
                // 固定使用2:3比例，对应1080×1620分辨率
                video.style.aspectRatio = '2/3';
                video.style.objectFit = 'contain'; // 确保视频完整显示不被裁剪
                video.style.width = '100%';
                video.style.height = '100%';
                console.log('更新视频比例: 2/3 (1080×1620)');
            }
        }

        // 更新视频播放速度
        function updateVideoSpeed() {
            const videoPlayer = document.getElementById('videoPlayer');
            const video = videoPlayer.querySelector('video');
            if (video) {
                const speedElement = document.getElementById('playbackSpeed');
                const speed = speedElement ? speedElement.value || 1 : 1;
                video.playbackRate = parseFloat(speed);
                console.log('更新播放速度:', speed);
            }
        }

        // 视频标签切换
        function switchVideo(index) {
            const tabs = document.querySelectorAll('.video-tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            tabs[index].classList.add('active');
            
            const videoPlayer = document.getElementById('videoPlayer');
            const videos = [
                '功能概览演示视频',
                '详细操作教程视频', 
                '实际使用案例视频'
            ];
            
            videoPlayer.innerHTML = `
                <div class="play-button" onclick="playVideo()">
                    <div class="play-icon"></div>
                </div>
                <div style="position: absolute; bottom: 10px; left: 10px; color: white; font-size: 12px;">
                    ${videos[index]}
                </div>
            `;
        }

        // 显示视频错误信息（独立函数）
        function showVideoError(message) {
            const videoPlayer = document.getElementById('videoPlayer');
            videoPlayer.innerHTML = `
                <div style="background: linear-gradient(135deg, #f8f9ff 0%, #e4edf9 100%); border-radius: 28px; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    <div style="width: 50px; height: 50px; border: 3px solid rgba(102, 126, 234, 0.3); border-top: 3px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px;"></div>
                    <p style="font-size: 14px; color: #667eea; margin: 0; text-align: center; padding: 0 20px;">${message}</p>
                    <button onclick="playVideo()" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 10px 20px; border-radius: 20px; margin-top: 15px; cursor: pointer; font-weight: 500; box-shadow: 0 5px 15px rgba(0,0,0,0.2);">重试</button>
                </div>
            `;
        }

        // 滚动动画
        function handleScrollAnimation() {
            const elements = document.querySelectorAll('.fade-in');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                
                if (elementTop < windowHeight * 0.8) {
                    element.classList.add('visible');
                }
            });
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化滚动动画
            window.addEventListener('scroll', handleScrollAnimation);
            handleScrollAnimation();
            
            // 为APP图标添加动画效果
            const appIcons = document.querySelectorAll('.app-icon');
            appIcons.forEach((icon, index) => {
                icon.style.animationDelay = `${index * 0.1}s`;
                icon.style.animation = 'fadeInUp 0.6s ease forwards';
            });
        });

        // 添加CSS动画关键帧
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>

</html>